<script lang="ts" setup>
import dayjs from 'dayjs'

const schema = [
    { label: '企业指导服务', field: 'totalZd', unit: '次' },
    { label: '企业咨询', field: 'totalZx', unit: '次' },
    { label: '回复率', field: 'rate', unit: '%' },
]
const schema2 = [
    { label: '在线咨询', field: 'totalZxzx', unit: '次' },
    { label: '月活跃量', field: 'totalYhyl', unit: '次' },
]
const infoData = ref<Record<string, number>>({
    totalZd: 114,
    totalZx: 204,
    rate: 98.1,
    totalZxzx: 114,
    totalYhyl: 114,
})
const thisYear = dayjs().year()
</script>
<template>
    <div class="flex gap-20px">
        <div class="flex-[5_1_0]">
            <div class="flex-1 text-20px font-PangMen">便民惠企({{ thisYear }})</div>
            <div class="flex gap-12px mt-20px">
                <div
                    v-for="item in schema"
                    :key="item.field"
                    class="bg-#7ccfff14 rounded-4px p-[8px_12px] flex-1"
                >
                    <div class="text-18px">{{ item.label }}</div>
                    <div class="">
                        <span class="">
                            <span class="text-32px color-#01FF85 fw-600">
                                {{ infoData[item.field] || 0 }}
                            </span>
                            <span class="text-14px ml-2px">{{ item.unit }}</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex-[4_1_0]">
            <div class="flex-1 text-20px font-PangMen">在线帮扶({{ thisYear }})</div>
            <div class="flex gap-12px mt-20px">
                <div
                    v-for="item in schema2"
                    :key="item.field"
                    class="bg-#7ccfff14 rounded-4px p-[8px_12px] flex-1"
                >
                    <div class="text-18px">{{ item.label }}</div>
                    <div class="">
                        <span class="">
                            <span class="text-32px color-#01FF85 fw-600">
                                {{ infoData[item.field] || 0 }}
                            </span>
                            <span class="text-14px ml-2px">{{ item.unit }}</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style></style>
